<template>
  <div class="main-menu">
    <VXETable
      ref="mainTable"
      :tableOption="tableOption"
      @radioChangeEvent="radioChangeEvent"
    >
      <template v-slot:tableButton>
        <el-button type="primary" @click="addMenuList"
          ><el-icon><Plus /></el-icon>&nbsp;{{ $t(lang.add) }}</el-button
        >
        <el-button type="primary" @click="editMenuList"
          ><el-icon><EditPen /></el-icon>&nbsp;
          {{ $t(lang.edit) }}</el-button
        >
        <el-button type="primary" @click="deleteMenuList"
          ><el-icon><Delete /></el-icon>&nbsp;
          {{ $t(lang.delete) }}</el-button
        >
      </template>
    </VXETable>
    <el-dialog
      v-model="dialogData.dialogVisible"
      :title="dialogData.title"
      :width="dialogData.width"
      draggable
    >
      <vxForm
        ref="formRef"
        :formData="formData"
        :formItems="formDolumn"
        @changeForm="changeForm"
      ></vxForm>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">{{ $t(lang.cancel) }}</el-button>
          <el-button type="primary" @click="submitDialog">{{ $t(lang.define) }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import VXETable from "@/components/vxe-table/index.vue";
import vxForm from "@/components/vx-form/index.vue";
import formItems from "./data/add";
import tableOption from "./data/data";
import { getDetail,deleteList,getSelectList } from "@/api/articleMenu";
import { ElMessage } from "element-plus";
import { inject } from 'vue';
const mainTable = ref();
let dialogData = reactive({
  dialogVisible: false,
  title: "新增",
  width: "50%",
});
const lang:any = reactive(inject('langs'))
let formData = reactive({});
let formDolumn = reactive(formItems);
const formRef = ref();
let redioSelect = reactive({ id: "" });
onMounted(() => {
  mainTable.value.getTableList("/menu/all", "post");
  getSelect()
});
const addMenuList = () => {
  dialogData.dialogVisible = true;
  dialogData.title = "新增";
};
const editMenuList = () => {
  if (redioSelect.id == "") {
    ElMessage({
      showClose: true,
      message: "请选择一条数据",
      type: "warning",
    });
    return;
  }

  dialogData.title = "修改";
  getDetails();
};
const deleteMenuList = () => {
  if (redioSelect.id == "") {
    ElMessage({
      showClose: true,
      message: "请选择一条数据",
      type: "warning",
    });
    return;
  }
  let obj = { id: redioSelect.id };
  deleteList(obj).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        showClose: true,
        message: res.message,
        type: "success",
      });
      mainTable.value.getTableList("/menu/all", "post");
    }
  });
};
const cancel = () => {
  formRef.value.resetForm();
  dialogData.dialogVisible = false;
  formData = reactive({});
};
const changeForm = (prop: any, val: any, option: any) => {
  formData.parentName = option.filter((i: any) => {
    return i.value == val;
  })[0].label;
};
const submitDialog = () => {
  let url =
    dialogData.title == "新增" ? "/menu/add" : "/menu/edit";
  formRef.value
    .submitForm({
      url: url,
      method: "post",
      data: formData,
    })
    .then((res: any) => {
      if (res.code == 200) {
        formRef.value.resetForm();
        formData = reactive({});
        dialogData.dialogVisible = false;
        mainTable.value.getTableList("/menu/all", "post");
      }
    });
};
const getDetails = () => {
  let obj = { id: redioSelect.id };
  getDetail(obj).then((res: any) => {
    formData = reactive(res.data);
    dialogData.dialogVisible = true;
  });
};
const radioChangeEvent = (data: any) => {
  redioSelect = data;
};
//获取下拉数据
const getSelect = async () => {
  const res = await getSelectList({ id:null })
  if(res.code == 200){
    formDolumn.items = formDolumn.items.map((i:any) => {
      if(i.prop == 'pId'){
        i.option = res.data.map((e:any) => {
          return {
            label:e.title,
            value:String(e.id)
          }
        })
      }
      return i
    })
  }
}
</script>

<style scoped lang="scss">
.main-menu {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  min-height: 500px;
}
</style>
